<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>this的用法</h3>
    <h4>方法上下文:</h4>
    <p>在此示例中，<b> user </b>对象是<b> getName </b>方法的所有者：</p>
    <p id="r2"></p>
    <p id="r1" style="color: red;"></p>
    <h3>在一个函数中，这指的是全局对象[object Window]:</h3>
    <h4 id="output" style="color: orange;"></h4>
    <h4>但是在严格模式下他是undefined</h4>
    <h3>JavaScript this 关键字 当作触发事件的元素</h3>

    <button>点击删除我</button>

    <p>点击改变我的背景颜色</p>
    <h4>从内联事件处理程序调用代码时，this设置为放置监听器的元素</h4>
    <button onclick="this.style.display='none'">点击删除我</button>
    <button onclick="alert(this)">点击</button>
    <p id="output1">
    </p>
    <p id="output2">
    </p>
    <h3>箭头函数=></h3>
    <h4 id="output3" style="color: red;"></h4>
    <script>
        var user = {
            firstName: "spy",
            lastName: "是柚子厨",
            age: 5,
            getName: function() {
                return this.firstName + this.lastName;
            }
        };

        document.getElementById("r1").innerHTML = user.getName();
        document.getElementById("r2").innerHTML = user.firstName + "-" + user.lastName + "-" + user.age;

        //下面是全局this
        console.log(this == window); //true
        a = 50;
        console.log(window.a); //50
        this.b = "Ciallo";
        console.log(window.b); //Ciallo
        console.log(b); //Ciallo

        //函数上下文
        function myFunc() {
            return this;
        }
        document.getElementById("output").innerHTML = myFunc();

        //this在DOM事件处理程序中
        //this被设置为触发事件的元素
        let btn = document.querySelector("button");
        let para = document.querySelector("p");

        btn.onclick = function() {
            this.style.display = "none";
        };

        para.onclick = function() {
            this.style.backgroundColor = "coral";
        };

        //从内联事件处理程序调用代码时，this设置为放置监听器的元素

        //显式函数绑定
        //call()和apply()方法是预定义的方法
        function add(c, d) {
            return this.a + this.b + c + d;
        }
        var obj = {
            a: 5,
            b: 10
        };
        document.getElementById("output1").innerHTML = (add.call(obj, 5, 7)); //27
        document.getElementById("output2").innerHTML = (add.apply(obj, [5, 7])); //27

        //箭头函数=>
        //在箭头函数（=>）中，this始终指向它被创建时所处的词法作用域中的this。
        //在全局代码中，它将被设置为全局对象：
        var globalObj = this;
        var myFunc22 = (() => this);
        document.getElementById("output3").innerHTML = globalObj;
    </script>
</body>

</html>